<template>
    <div class="GroupRecordBox">
        <span class="pageName">群组管理 > 举报记录</span>

        <!-- 搜索框 -->
        <div class="searchBox">
            <div class="searchInp">
                <label for="reportID">
                    举报ID：
                </label>
                <el-input v-model="reportID" placeholder="请输入举报ID" name="reportID" class="inp"></el-input>

                <label for="reportName">
                    举报昵称：
                </label>
                <el-input v-model="reportName" placeholder="请输入举报昵称" name="reportName" class="inp"></el-input>

                <label for="reportedGroupID">
                    被举报群ID：
                </label>
                <el-input v-model="reportedGroupID" placeholder="请输入被举报群ID" name="reportedGroupID"
                    class="inp"></el-input>

                <label for="reportedGroupName">
                    被举报群昵称：
                </label>
                <el-input v-model="reportedGroupName" placeholder="请输入被举报群昵称" name="reportedGroupName"
                    class="inp"></el-input>

                <label for="reportedContent">
                    举报内容：
                </label>
                <el-select v-model="reportedContent" slot="prepend" placeholder="全部" name="reportedContent"
                    class="reportOption">
                    <!-- 循环渲染option的每一项 -->
                    <el-option v-for="optionArr in reportContentArr" :key="optionArr.id" :label="optionArr.content"
                        :value="optionArr.content"></el-option>
                </el-select>
                <label for="select">
                    被举报群状态：
                </label>
                <!-- select选择框 -->
                <el-select v-model="selectValue" slot="prepend" placeholder="全部" name="select" class="option">
                    <el-option v-for="optionArr in selectOptionArr" :key="optionArr.id" :label="optionArr.content"
                        :value="optionArr.content"></el-option>
                </el-select>
                <!-- 时间 -->
                <label for="date">
                    举报时间：
                </label>
                <el-date-picker v-model="reportDate" type="daterange" align="right" unlink-panels range-separator="~"
                    start-placeholder="2015-10-02" :end-placeholder="endDate" :picker-options="pickerOptions"
                    value-format="yyyy-M-d" class="dateInp">
                </el-date-picker>

                <el-button type="primary" @click="searchRecord">搜索</el-button>
            </div>



        </div>
        <!-- 表格 -->
        <div class="tableBox">
            <el-table :data="groupRecordList.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                tooltip-effect="dark" border style="width: 98%;font-size: 14px;margin: auto;margin-left: 30px;"
                :header-cell-style="{ background: '#015478', color: '#fff' }">
                <el-table-column prop="reportId" label="举报ID" align="center">
                </el-table-column>
                <el-table-column prop="reportName" label="举报昵称" align="center">
                </el-table-column>
                <el-table-column prop="reportDate" label="举报时间" align="center">
                </el-table-column>
                <el-table-column prop="reportedGroupId" label="被举报群ID" align="center">
                </el-table-column>
                <el-table-column prop="reportedGroupName" label="被举报群昵称" align="center">
                </el-table-column>
                <el-table-column prop="reportedContent" label="举报内容" align="center" width="245px">
                </el-table-column>
                <el-table-column prop="reportedGroupMode" label="被举报群状态" align="center">
                </el-table-column>
                <el-table-column label="操作" align="center" width="200px">
                    <template slot-scope="scope">
                        <el-button @click="freeze(scope.row)" type="text" style="color: #015478;font-size: 14px">{{
                            scope.row.operate
                        }}</el-button>
                        <el-button @click="disband(scope.row)" type="text" style="color: #015478;font-size: 14px">{{
                            scope.row.disband
                        }}</el-button>
                        <!-- <el-button @click="view(scope.row)" type="text" style="color: #015478;font-size: 14px">查看聊天记录</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <pagination :tableData="groupRecordList" @sizeChange="sizeChange" @currentChange="currentChange">
            </pagination>
        </div>
    </div>
</template>

<script>

import pagination from '@/components/pagination/pagination.vue';
export default {
    name: 'GroupRecord',
    components: {
        pagination
    },
    data() {
        return {
            groupRecordList: [],
            currentPage: 1, // 当前页码
            total: '', // 总条数
            pageSize: 8, // 每页的数据条数

            // 输入框内容
            reportID: '',
            reportName: '',
            reportedGroupID: '',
            reportedGroupName: '',
            reportedContent: '',
            selectValue: '',
            reportDate: '',
            reportContentArr: [
                { id: 1, content: '全部' },
                { id: 2, content: '群成员发布不适当信息对我造成骚扰' },
                { id: 3, content: '群成员存在欺诈骗钱行为' },
                { id: 4, content: '群成员存在赌博行为' },
                { id: 5, content: '群成员传播谣言信息' },
                { id: 6, content: '群成员发布仿冒品信息' }
            ],
            selectOptionArr: [
                { id: 8, content: '全部' },
                { id: 9, content: '正常' },
                { id: 0, content: '已冻结' },
                { id: 10, content: '已解散' }
            ],
            // 设置默认显示时间
            endDate: '',
            // 时间输入框快捷选项
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }],
                // 设置可选时间范围
                disabledDate: (time) => {
                    return time.getTime() <= new Date('2015-10-01').getTime() || time.getTime() > Date.now() - 8.64e6
                }
            }
        }
    },
    methods: {
        sizeChange(current, count) {
            this.currentPage = current;
            this.pageSize = count;
        },
        currentChange(current) {
            this.currentPage = current
        },
        // 获取当前日期
        handleTimeNew() {
            let now = new Date();
            let year = now.getFullYear();
            let month = (now.getMonth() + 1).toString().padStart(2, 0);
            let day = now.getDate().toString().padStart(2, 0);
            return year + '-' + month + '-' + day
        },

        // 搜索
        searchRecord() {
            console.log('搜索');
            this.$axios({
                method: 'get',
                url: this.$api.group.groupRecordListSearch,
                params: {
                    reportID: this.reportID,
                    reportName: this.reportName,
                    reportedGroupID: this.reportedGroupID,
                    reportedGroupName: this.reportedGroupName,
                    reportedContent: this.reportedContent,
                    reportedGroupMode: this.selectValue,
                    reportDate: this.reportDate
                }
            })
                .then(res => {
                    this.groupRecordList = res.data
                    this.reportID = '',
                        this.reportName = '',
                        this.reportedGroupID = '',
                        this.reportedGroupName = '',
                        this.reportedContent = this.reportContentArr[0].content,
                        this.selectValue = this.selectOptionArr[0].content,
                        this.reportDate = ''
                })
                .catch(err => {
                    console.log(err);
                })
        },
        // 冻结当前选中内容
        freeze(row) {
            this.$axios({
                method: 'get',
                url: this.$api.group.groupRecordListMode,
                params: {
                    reportedGroupId: row.reportedGroupId,
                    reportedGroupMode: row.reportedGroupMode,
                    operate: row.operate
                }
            })
                .then(res => {
                    if (res.data == 'success') {
                        this.$axios.get(this.$api.group.groupRecordList)
                            .then(res => {
                                this.groupRecordList = res.data;
                            })
                            .catch(err => {
                                console.log(err);
                            })
                    }
                })
                .catch(err => {
                    console.log(err);
                })
        },
        disband(row) {
            console.log(row);
            this.$axios({
                method: 'get',
                url: this.$api.group.disbandGroupRecordList,
                params: {
                    reportedGroupId: row.reportedGroupId,
                    reportedGroupMode: row.reportedGroupMode,
                    operate: row.operate,
                    disband:row.disband
                }
            })
                .then(res => {
                    if (res.data == 'success') {
                        this.$axios.get(this.$api.group.groupRecordList)
                            .then(res => {
                                this.groupRecordList = res.data;
                            })
                            .catch(err => {
                                console.log(err);
                            })
                    }
                })
                .catch(err => {
                    console.log(err);
                })
        }

    },
    created() {
        this.reportedContent = this.reportContentArr[0].content,
            this.selectValue = this.selectOptionArr[0].content,
            this.endDate = this.handleTimeNew()
        this.$axios.get(this.$api.group.groupRecordList)
            .then(res => {
                this.groupRecordList = res.data;
            })
            .catch(err => {
                console.log(err);
            })
    },
}
</script>

<style scoped>
.GroupRecordBox {
    display: flex;
    flex-direction: column;
}

.searchBox {
    display: flex;
    align-items: center;
}

.inp {
    width: 155px;
}

.searchInp {
    height: 100px;
    display: flex;
    align-items: center;
    align-content: space-around;
    margin-left: 10px;
    flex-wrap: wrap;
}

.option {
    width: 90px;
}

.reportOption {
    width: 160px;
}

.dateInp {
    width: 225px;
}

button {
    height: 40px;
    margin-left: 10px;
}
</style>